<script lang="ts" setup>
interface Props {
  total: number
  currentPage: number
  pageSize: number
  layout?: string
  pageSizes?: number[]
}

withDefaults(defineProps<Props>(), {
  currentPage: 1,
  pageSize: 10,
  layout: "prev, pager, next, sizes, total",
  pageSizes: () => [10, 20, 30, 40]
})

const emit = defineEmits<{
  "update:currentPage": [value: number]
  "update:pageSize": [value: number]
  "size-change": [value: number]
  "current-change": [value: number]
}>()

const handleSizeChange = (value: number) => {
  emit("update:pageSize", value)
  emit("size-change", value)
}

const handleCurrentChange = (value: number) => {
  emit("update:currentPage", value)
  emit("current-change", value)
}
</script>

<template>
  <div class="pagination-container">
    <el-pagination
      :current-page="currentPage"
      :page-size="pageSize"
      :page-sizes="pageSizes"
      :total="total"
      layout="prev, pager, next, sizes, total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    >
    </el-pagination>
  </div>
</template>

<style lang="scss" scoped>
.pagination-container {
  @apply w-full;
  :deep(.el-pagination) {
    @apply flex float-right mt-5;
  }
}
</style>
